<template>
	<!-- 考试 -->
	<view class="container">
		<image @click="openFlowChart()" class="banner" :src="require('../../static/exam/banner@3x.png')"></image>
		<view class="switch-tab">
			<view @click="activeTab = 1" :class="['tab', activeTab === 1 && 'active']">考试任务</view>
			<view @click="activeTab = 2" :class="['tab', activeTab === 2 && 'active']">历史考试</view>
			<view class="switch-line"></view>
		</view>

		<view class="exam-list-con" :style="{ flex: isEmpty ? 1 : 'unset' }">
			<my-empty v-if="isEmpty"></my-empty>
			<template v-else>
				<my-exam-list-item
					@click.native="viewResult({ upid: exam.upid, status: activeTab }, null, false)"
					@start-exam="startExam"
					v-for="exam in list"
					:key="exam.examid"
					:item="exam"
				></my-exam-list-item>
			</template>
		</view>
		<u-loadmore v-show="isShowLoadMore" bg-color="#f5f5f5" @loadmore="loadmore" :status="status" icon-type="flower" :load-text="loadText" />
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';

export default {
	mixins: [exam],
	onLoad() {
		this.init();
	},
	onShow(){
		setTimeout(()=>{
			this.init();	
		},800)
	},
	data() {
		return {
			activeTab: 1,
			examTask: [],
			examHistory: [],
			status: 'loadmore',
			loadText: {
				loadmore: '点击更多',
				loading: '加载中...',
				nomore: '没有更多了'
			}
		};
	},
	computed: {
		list() {
			return this.activeTab === 1 ? this.examTask : this.examHistory;
		},
		moduleName() {
			return this.activeTab === 1 ? 'task' : 'history';
		},
		isEmpty() {
			return this.list.length === 0 && this.status !== 'loading';
		}
	},
	methods: {
		init() {
			this.examTask = [];
			this.examHistory = [];
			return this.getPageData();
		},
		openFlowChart() {
			uni.navigateTo({
				url: 'examProcess/examProcess'
			});
		},
		getPageData() {
			this.status = 'loading';
			return new Promise((resolve, reject) => {
				Promise.all([
					this.request.get('/app/exam/getUserExamList', {
						type: 1
					}),
					this.request.get('/app/exam/getUserExamList', {
						type: 2
					})
				])
					.then(res => {
						this.examTask = res[0].result1;
						this.examHistory = res[1].result1;
						if (this.examTask.length + this.examHistory.length < 4) this.status = 'nomore';
						else this.status = 'loadmore';
						resolve();
					})
					.catch(reject);
			});
		},
		loadmore() {
			uni.navigateTo({
				url: `examTaskAndHistory/examTaskAndHistory?moduleName=${this.moduleName}`
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.container {
	padding-bottom: 20upx;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.exam-list-con {
	position: relative;
	background-color: #ffffff;
	// flex: 1;
	// height: 100%;
	.paper-item {
		padding: 35upx 30upx;
		border-bottom: 1px solid #ebebeb;
		margin-bottom: 0;
		height: auto;
	}
	.paper-item:last-child {
		border-bottom: none;
	}
}
.switch-line{
	position:absolute;
	bottom: 0;
}
.u-load-more-wrap {
	margin-top: 40upx !important;
	margin-bottom: 40upx !important;
}
.banner {
	width: 100%;
	height: 350upx;
}
.switch-tab {
	display: flex;
	align-items: flex-end;
	padding: 30upx;
	padding-bottom: 2upx;
	background:#fff url(../../static/exam/line@3x.png) no-repeat;
	background-size: 100%;
	background-position: left bottom;
	box-sizing: content-box;
	height: 94upx;
	position: relative;
	view {
		width: 170upx;
		line-height: 70upx;
		text-align: center;
		font-size: 28upx;
		font-weight: 400;
		color: white;
		transition: all 0.2s ease-in-out;
		border-radius:14upx 14upx 0 0;
	}
	view:nth-child(1) {
		background: url(../../static/exam/blue@3x.png) no-repeat center;
		background-size: 100% 100%;
		margin-right: 20upx;
	}
	view:nth-child(2) {
		background: url(../../static/exam/orange@3x.png) no-repeat center;
		background-size: 100% 100%;
	}
	.active {
		width: 224upx;
		line-height: 94upx;
		font-size: 32upx;
		border-radius:18upx 18upx 0 0;
	}
}
</style>
